<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href='https://plus.google.com/104093787575230359634' rel='author'/>
<meta content='eX4aetTb1bRMfPFenBkl0DNG0nVF8c4j_EAsagbcrXE' name='google-site-verification'/>
<meta content='CED76A8C706DF43769EF018E0DAE616A' name='msvalidate.01'/>
<title>Tool Coding Editor | Blog Mas Andes</title>
<meta content='Tool Coding Editor | Blog Mas Andes' name='description'/>
<meta content='tool code editor, virtual code editor, online code editor, virtual code online' name='keywords'/>
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/codemirror.css">
<link rel="stylesheet" href="assets/simple-hint.css">	
<link rel="stylesheet" href="font-awesome-4.0.3/css/font-awesome.min.css">	
<link rel="stylesheet" href="assets/googlecode.css">	
<script type="text/javascript" src="assets/codemirror.js"></script>
<script type="text/javascript" src="assets/javascript.js"></script>
<script type="text/javascript" src="assets/css.js"></script>
	<script type="text/javascript" src="assets/xml.js"></script>
	<script type="text/javascript" src="assets/htmlmixed.js"></script>
	<script type="text/javascript" src="assets/simple-hint.js"></script>
	<script type="text/javascript" src="assets/zen_codemirror.js"></script>
	<script type="text/javascript" src="assets/swfobject.js"></script>
	<script type="text/javascript" src="assets/highlight.pack.js"></script>
<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push([&#39;_setAccount&#39;, &#39;UA-29313206-1&#39;]);
_gaq.push([&#39;_trackPageview&#39;]);
(function() {
var ga = document.createElement(&#39;script&#39;); ga.type = &#39;text/javascript&#39;; ga.async = true;
ga.src = (&#39;https:&#39; == document.location.protocol ? &#39;https://ssl&#39; : &#39;http://www&#39;) + &#39;.google-analytics.com/ga.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="background">
<h1><a href="http://mas-andes.blogspot.com" title="http://mas-andes.blogspot.com" id="judul"><i class="fa fa-cog fa-spin"></i> Tool Coding Editor | Blog Mas Andes <span>[ BMA ]</span></a></h1>
<div id="alat">
<div id="code">
<h2><i class="fa fa-code"></i> Code</h2>
</div>
<div id="demo">
<h2><i class="fa fa-laptop"></i> Preview</h2>
</div>
</div>
<div class="bersih"></div>
</div>

<div id="ide">
<div id="editor">
<div class="lebar">
<textarea name="" id="editor-area" cols="30" rows="10"></textarea>
</div>
</div>
<div id="preview">
<div class="lebar">
<iframe src frameborder="0" id="preview-area"></iframe>
</div>
</div>
</div>

<script type="text/javascript">
      var delay;
      var editor = CodeMirror.fromTextArea(document.getElementById('editor-area'), {
        mode: 'text/html',
        tabSize:8,
        indentUnit:8,
        matchBrackets: true,
        lineNumbers:true,
        onChange: function() {
          clearTimeout(delay);
          delay = setTimeout(updatePreview, 300);
        },
       	onKeyEvent: function() {
			return zen_editor.handleKeyEvent.apply(zen_editor, arguments);
		}
      });
      
      function updatePreview() {
        var previewFrame = document.getElementById('preview-area');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();
      }
      setTimeout(updatePreview, 300);
</script>
</body>
</html>